<template>
  <div>

    <div class="app-container">
      <div class="section">
        <el-form ref="form" :model="form" :inline="true" class="add">

        </el-form>
        <el-row :gutter="10">
          <div v-for="(dict,index) in tableInfo" >
            <el-col   :span="2" >
              <div class="table ">
                <p>{{dict.tableName}}</p>
                <el-switch v-model="dict.status"
                           active-color="#67C23A"
                           inactive-color="#EBEEF5"
                           :inactive-text="dict.status?'通电':'断电'" @change="switchStatus($event,dict)">
                </el-switch>
              </div>
            </el-col>
          </div>

        </el-row>
      </div>
    </div>
  </div>
</template>

<script>


  import { getShopTableInfo, listSettlement,updateSettlement } from '@/api/mahjong/settlement'
  import { updateTablenumberOpen,updateTablenumberClose } from '@/api/mahjong/tablenumber'
  export default {
    name: "Shops",

    data() {
      return {
        tableInfo:[],
        form:{
          value:1
        }
      };
    },
    created() {
      this.getTableInfo();
    },
    methods: {
      switchStatus(event,item){
        //  item.status=event?0:1;
        /* updateSettlement(item).then(response => {
            this.getTableInfo();
         });*/
        item.id=item.tableId
        console.log(item)
        if(item.status){
          updateTablenumberOpen(item).then(response => {
            this.getTableInfo();
          });
        }else{
          updateTablenumberClose(item).then(response => {
            this.getTableInfo();
          });
        }


      },
      /** 查询结算列列表 */
      getTableInfo() {
        getShopTableInfo().then(response => {
          response.data.map(item=>{
            item.status==1?item.status=true:item.status=false
          })
          this.tableInfo = response.data;
          // this.total = response.total;
          // this.loading = false;
        });
      },
    }
  };
</script>
<style scoped rel="stylesheet/scss" lang="scss">
  .top{
    background-color: #fff;
    align-items: center;
  }
  .section{
    background-color: #fff;
    min-height: calc(100vh - 84px);
    padding: 20px;
    .table{
      background-color: #F4F4F4;
      border-radius: 6px;
      text-align: center;
      height: 80px;
      padding-top: 15px;
      margin-bottom: 10px;
      p{
        color: #9C9186;
        font-size: 16px;
        margin-bottom: 5px;
      }
      &:hover,&:active,&:visited{
        background-color:#CAAB62;

        p{
          color: #fff;
        }
      }
    }
  }
</style>
